<template>
  <div style="padding-top: 16px;">
    <t-row >
      <t-col span="12">
        <div class="demoCol"></div>
      </t-col>
      <t-col span="12">
        <div class="demoCol demoCol-dark"></div>
      </t-col>
    </t-row>
     <t-row  class="demoRow">
      <t-col span="8">
        <div class="demoCol"></div>
      </t-col>
      <t-col span="8">
        <div class="demoCol demoCol-dark"></div>
      </t-col>
      <t-col span="8">
        <div class="demoCol"></div>
      </t-col>
    </t-row>
    <t-row  class="demoRow">
      <t-col span="6">
        <div class="demoCol"></div>
      </t-col>
      <t-col span="6">
        <div class="demoCol demoCol-dark"></div>
      </t-col>
      <t-col span="6">
        <div class="demoCol"></div>
      </t-col>
      <t-col span="6">
        <div class="demoCol demoCol-dark"></div>
      </t-col>
    </t-row>
  </div>
</template>
<script>
import tRow from "../../../src/components/row";
import tCol from "../../../src/components/col";
export default {
  components: { tRow, tCol },
  data() {
    return {};
  }
};
</script>


<style scoped>
* {
  box-sizing: border-box;
}
.demoRow {
  margin: 10px 0;
}
.demoCol {
  height: 50px;
  border: 1px solid rgb(54, 191, 255);;
  border-radius: 4px;
  background: rgb(35, 114, 151);
  display: flex;
  justify-content: center;
  align-items: center;
}
.demoCol-dark{
  border: rgb(13, 83, 116);
  background: rgb(13, 64, 88);
}
</style>